<template>
  <div>
    <div class="bmsjkhspSteps br">
      <div class="bmsjkhspStepsTxt" v-if="typeValue && tabsList.find(item=>typeValue==item.val)">
        <img :src="tabsList.find(item=>typeValue==item.val).img" />
        
        <a-tooltip>
          <template slot="title">
            {{ list.find(item=>typeValue==item.typeValue).sm }}
          </template>
          <span>{{ tabsList.find(item=>typeValue==item.val).title }}</span>
        </a-tooltip>
      </div>
      <!-- 步骤条 -->
      <Steps style="height: 80px;" :stepNum="stepNum" :allStepActive="allStepActive" />
    </div>
    <component
      :is="componentId"
      :isReset="isReset"
      @toRun="toRun"
      @CheckResult="CheckResult"
      @SetConfig="SetConfig"
      @changeflag="handleChangeflag"
      @changStep="handleChangeStep"
    ></component>
  </div>
</template>

<script>
import Steps from './components/Steps'
import SetConfig from './components/SetConfig'
import ResultPart from './components/ResultPart'
export default {
  components: {
    Steps,
    SetConfig,
    ResultPart
  },
  data() {
    return {
      typeValue: null,
      stepNum: {},
      componentId: 'SetConfig',
      cmps: ['SetConfig', 'ResultPart'],
      isReset: false,
      allStepActive: false,
      list: [
        { id: 1, title: '21年合同进场22年实际进场并结算分包企业', type: '分包管理', typeValue: 1, sm: '合同约定2021年6月前进场，但2022年实际进场的分包队伍，且分包合同额大于10万且2022年已计价。' },
        { id: 1, title: '承担治缺费用', type: '分包管理', typeValue: 2, sm: '指被审计单位（或项目）工程施工管理过程中或完工后，发生缺陷整治成本费用，但单位（或项目）未从相应主体工程施工单位结算中扣回，导致外部检查时易认定为存在质量安全隐患风险，以及效益流失的问题。' },
        { id: 1, title: '物资招标不规范——数量差异，价格差异', type: '物资机械管理', typeValue: 5, sm: '指被审计单位（或项目）在物资招标过程中，采购合同标的物数量、单价或金额与中标明细不一致，可能存在规避招标或引发成本增加风险的问题。' },
        { id: 1, title: '主要物资超耗应扣未扣', type: '物资机械管理', typeValue: 4, sm: '指被审计单位（或项目）在项目管理过程中，分包方实际耗用量超出应耗材料的数量，而未按分包合同规定及确立的损耗率进行材料扣款，引发项目成本增加，造成项目亏损风险的问题。' },
        { id: 1, title: '物资处理类“小金库”', type: '物资机械管理', typeValue: 6, sm: '指被审计单位（或项目）违反法律法规及企业有关规定，通过隐匿、截留或部分截留、超期交回边角废料处理收入、周转材料变卖收入等形成的“小金库”。' },
        { id: 1, title: '拌和站混凝土核算、拌和站原材料核算', typeValue: 7, type: '物资机械管理', sm: '指被审计单位（或项目）在自建拌和站生产管理过程中，针对产出的混凝土，根据使用队伍的劳务合同规定，未进行消耗节超核算管理，引发的效益流失风险问题。' },
        { id: 1, title: '拖欠农民工工资', type: '项目管理', typeValue: 9, sm: '指被审计单位（或项目）合同履约过程中，未能严格按照合同约定付款时间代付农民工工资，导致存在拖欠的问题。' },
      ],
      tabsList: [
        { val: 1, title: '21年合同进场22年实际进场并结算分包企业', img: require('@/assets/new_modal/12.png'), path: '/newModal/IllegalSigning' },
        { val: 2, title: '承担治缺费用', img: require('@/assets/new_modal/15.png'), path: '/newModal/compensationForSubcontractingDemobilization' },
        { val: 3, title: '劳务分包补充合同占比高', img: require('@/assets/new_modal/14.png'), path: '/newModal/laborSubcontract' },
        { val: 4, title: '主要物资超耗应扣未扣', img: require('@/assets/new_modal/6.png'), path: '/newModal/mainMaterials' },
        { val: 5, title: '物资招标不规范——数量差异，价格差异', img: require('@/assets/new_modal/13.png'), path: '/newModal/materiaBidding' },
        { val: 6, title: '物资处理类“小金库”', img: require('@/assets/new_modal/10.png'), path: '/newModal/materialHandling' },
        { val: 7, title: '拌和站混凝土核算、拌和站原材料核算', img: require('@/assets/new_modal/7.png'), path: '/newModal/offBalanceSheetAccounts' },
        { val: 8, title: '备用金（大额）异常', img: require('@/assets/new_modal/8.png'), path: '/newModal/reserveFunds' },
        { val: 9, title: '拖欠农民工工资', img: require('@/assets/new_modal/9.png'), path: '/newModal/salaryModel' },
        { val: 10, title: '承担缺陷整治费用', img: require('@/assets/new_modal/11.png'), path: '/newModal/undertakeDefects' },
      ],
    }
  },
  created() {
    const { isReset, typeValue } = this.$route.query;
    if(isReset == 'true') {
      this.isReset = true;
      this.componentId = 'ResultPart'
    }else {
      this.isReset = false;
      this.componentId = 'SetConfig'
    }
    console.log(this.isReset);
    if(typeValue) {
      this.typeValue = typeValue;
    }
  },
  methods: {
    toRun() {
      this.isReset = true;
      this.componentId = 'ResultPart'
    },
    CheckResult() {
      this.allStepActive = true
      this.componentId = 'ResultPart'
    },
    SetConfig() {
      this.componentId = 'SetConfig'
      this.isReset = true
    },
    handleChangeflag() {
      this.isReset = false
      this.allStepActive = false
    },
    handleChangeStep(stepNum) {
      this.stepNum = { ...stepNum }
    }
  }
}
</script>

<style lang="less" scoped>
.br {
  border-radius: 20px;
  margin: 0px 10px 20px;
}
.bmsjkhspSteps {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 20px;
  background-color: #fff;
  overflow: hidden;
}
.bmsjkhspStepsTxt {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 300px;
  height: 80px;
  background-color: rgba(49, 84, 164, 1);
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: #FFFFFF;
  text-align: center;
  line-height: normal;
  letter-spacing: normal;
  img {
    width: 25px;
    height: 25px;
  }
}
</style>
